<template>
	<view class="container">
		<view class="box-bg">
			<uni-nav-bar id="box-bg-top" height="50px" color="white" background-color="#0044cc" shadow rightText="联系客服"
				title="运输" />
		</view>
		<view v-if="transportNull" class="transportListNo">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<u-button class="custom-style" type="primary" shape="circle" text="马上去抢单"
				@click="selectOrders()"></u-button>

		</view>
		<view v-if="transportHave" class="transportListYes" @click="selectInfo()">
			<uni-card class="card">
				<view class="upview">
					<view class="begin">始发地位置</view>
					<view class="point">·····················</view>
					<view class="end">目的地位置</view>
				</view>
				<view class="downview">
					<view class="startplace">太原</view>
					<view class="endplace">河北</view>
				</view>
			</uni-card>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				transportNull: true,
				transportHave: false,
				transportList: [1]
			}
		},
		onLoad() {
			this.getTransportList()
		},
		methods: {
			getTransportList() {
				if (this.transportList.length > 0) {
					this.transportNull = false
					this.transportHave = true
				}
			},
			selectInfo() {
				uni.navigateTo({
					url: "/pages/transport/transport2"
				})
			},
			selectOrders() {
				uni.switchTab({
					url: "/pages/found-goods/found-goods"
				})
			}
		}
	}
</script>

<style>
	.transportListNo {
		margin-top: 200px;
	}

	.transportListYes {
		margin-top: 30px;
	}

	/deep/.custom-style {
		margin-top: 20px;
		background-color: blue;
		width: 300rpx;
	}

	.transportInfo {
		height: 500px;
	}

	.upview {
		margin-top: 15px;
		margin-left: 15px;
	}

	.begin {
		font-weight: bold;
		display: inline-block;
		font-size: 20px;
		color: white;
	}

	.point {
		display: inline-block;
		font-weight: bold;
		padding: 0px 5px;
		font-size: 16px;
	}

	.end {
		display: inline-block;
		font-weight: bold;
		font-size: 20px;
		color: white;
	}

	.downview {
		margin: 0px 20px;
		line-height: 70px;
	}

	.startplace {
		display: inline-block;
		font-size: 20px;

	}

	.endplace {
		display: inline-block;
		font-size: 20px;
		float: right;
		margin-right: 20px;

	}

	.card {
		height: 120px;
		background: linear-gradient(to bottom, #b9bcad, #d5d5d5);
	}
</style>